<template>
  <div class="page2">
    <div class="containt fadeInDown">
      <p> <span class="yellowfont">协同星球</span>集团上下信息进一步实现纵向贯通，横向协同，支持随时随地、多种沟通方式、各种信息形式的高效便捷交流平台。</p>

    </div>
    <div class="img1">
      <!-- <div class="robot animate__fadeInBottomLeft">
        <img class="slideUp" src="../../assets/images/bill2022/2/img2.png">
      </div> -->
      <!-- <img class="pm animate__fadeInRight" src="../../assets/images/bill2022/2/img1.png"> -->

    </div>

  </div>
</template>

<script>

export default {
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>

<style lang='less' scoped>
.page2 {
    width: 100%;
    height: 100vh;
  
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
  .containt {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
  
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 4rem;
    
    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }

  .img1 {
    position: absolute;
    bottom: 0rem;
    width: 90%;
    height: 40rem;
    margin-left: 10%;
    position: relative;
    .pm {
      width: 32.6875rem;
      position: absolute;
      right: 0rem;
      top:0rem;
     
    }

    .robot {
      position: absolute;
      width: 24.6875rem;
      z-index: 1;
      left: -4rem;
      top: 18rem;
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInRight {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInBottomLeft {
  animation: fadeInBottomLeft 2s ease-in-out;
  animation-iteration-count: 1;
}

.slideUp {
    animation: slideUp 1s ease-in-out;
    -webkit-animation:slideUp 1s ease-in-out;
    -moz-animation: slideUp 1s ease-in-out;/*gecko内核的浏览器（如 Firefox）*/
	-o-animation: slideUp 1s ease-in-out;/*Opera 浏览器*/
	-ms-animation: slideUp 1s ease-in-out;/*IE8+*/
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }

    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-webkit-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }

  @-moz-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-o-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-ms-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
</style>